<template>
	<view>
		<u-navbar backIconColor="#ffffff" titleColor="#ffffff" :title="title"
			:background="{background: 'var(--mainColor)'}">
			<view class="flex align-center u-m-r-40" slot='right' v-if="type == 'edit'" @click="del">
				<text class="u-font-26 text-white">删除</text>
			</view>
		</u-navbar>
		<u-form :model="form" ref="uForm" labelWidth="250">
			<view class="u-p-x-30">
				<u-form-item label="持卡人姓名" prop="card_name">
					<u-input v-model="form.card_name" placeholder="请填写持卡人姓名" />
				</u-form-item>
				<u-form-item label="银行名称" prop="bank_name">
					<u-input v-model="form.bank_name" type="select" placeholder="请选择银行" @click="bankListShow = true" />
				</u-form-item>
				<u-form-item label="银行所在省市" prop="areaName">
					<u-input v-model="form.areaName" type="select" placeholder="请选择银行所在省市" @click="showRegion = true" />
				</u-form-item>
				<u-form-item label="银行卡号" prop="card_no">
					<u-input v-model="form.card_no" placeholder="请填写银行卡号" />
				</u-form-item>
				<u-form-item label="证件有效期类型" prop="cert_date_type">
					<u-radio-group v-model="form.cert_date_type">
						<u-radio :name="1"> 长期有效 </u-radio>
						<u-radio :name="0"> 非长期有效 </u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="证件开始日期" prop="cert_begin_date">
					<u-input v-model="form.cert_begin_date" type="select" @click="certBeginDateShow = true"
						placeholder="请选择证件有效期开始日期" />
				</u-form-item>
				<u-form-item label="证件结束日期" prop="cert_end_date" v-if="form.cert_date_type === 0">
					<u-input v-model="form.cert_end_date" type="select" @click="certEndDateShow = true"
						placeholder="请选择证件有效期结束日期" />
				</u-form-item>
				<u-form-item label="证件类型" prop="cert_type_text">
					<u-input v-model="form.cert_type_text" type="select" @click="certTypeShow = true" />
				</u-form-item>
				<u-form-item label="证件号码" prop="cert_no">
					<u-input v-model="form.cert_no" placeholder="请填写证件号码" />
				</u-form-item>
				<!-- <u-form-item label="证件正面照片" prop="cert_img1">
					<u-upload @on-choose-complete="uploadSuccess" index="cert_img1"
						:file-list="log.cert_img1 ? [{url:log.cert_img1}] : []" ref="uUpload1" max-count="1" width="150"
						height="150" :max-size="2 * 1024 * 1024" :show-tips="false" @on-oversize="oversize">
					</u-upload>
				</u-form-item>
				<u-form-item label="证件反面照片" prop="cert_img2">
					<u-upload @on-choose-complete="uploadSuccess" index="cert_img2"
						:file-list="log.cert_img2 ? [{url:log.cert_img2}] : []" ref="uUpload2" max-count="1" width="150"
						height="150" :max-size="2 * 1024 * 1024" :show-tips="false" @on-oversize="oversize">
					</u-upload>
				</u-form-item> -->
			</view>
		</u-form>

		<view class="text-center u-p-y-30">
			<dy-button width="576rpx" size="default" @click="submit">提交</dy-button>
		</view>

		<u-select v-model="bankListShow" :list="bankList" label-name="name" value-name="id"
			@confirm="bankConfirm"></u-select>
		<u-select v-model="certTypeShow" :list="certTypeList" label-name="name" value-name="id"
			@confirm="certTypeConfirm"></u-select>
		<u-select v-model="showRegion" :list="areaList" label-name="name" value-name="code" @change="changeRegion"
			@confirm="confirmRegion" mode="mutil-column-auto"></u-select>
		<u-picker mode="time" v-model="certBeginDateShow" @confirm="certBeginDateChange" :params="{
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				}"></u-picker>
		<u-picker mode="time" v-model="certEndDateShow" @confirm="certEndDateChange" :params="{
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				}"></u-picker>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import {
		BaseCenterApi
	} from '@/api/serves.js'
	export default {
		data() {
			return {
				title: '绑定银行卡',
				type: 'add',
				bank_id: '',
				certTypeShow: false, // 证件类型
				certBeginDateShow: false, // 证件开始日期
				certEndDateShow: false, // 证件结束日期
				bankListShow: false, // 银行卡列表显示
				showRegion: false, // 地区列表显示
				bankList: [], // 银行卡列表
				areaList: [], // 地区列表
				certTypeList: [], // 证件类型
				log: {}, // 
				form: {
					areaName: '', // 开户行所在城市
					area_id: null, // 开户行所在城市id
					bank_name: '', // 银行名称
					bank_code_id: null, // 银行id
					card_name: '', // 持卡人姓名
					card_no: null, // 银行卡号
					cert_begin_date: '', // 证件有效期开始日期
					cert_date_type: 1, // 证件有效期类型,1=长期有效,0=非长期
					cert_end_date: '', // 证件有效期结束日期
					cert_img1: '', // 证件照片1
					cert_img2: '', // 证件照片2
					cert_no: '', // 证件号码
					cert_type_text: '', // 证件类型
					cert_type: null, // 证件类型：0:身份证;1:护照;2:军官证;3:士兵证;4:回乡证;5:户口本;6:外国护照;7:其他;8:暂住证;9:警官证;10:文职干部证;11:港澳台同胞通行证;13:外国人居留证;14:台胞证;15:港澳台居住证
				},
				rules: {
					card_name: [{
						required: true,
						message: '请输入持卡人姓名',
						trigger: ['blur', 'change']
					}],
					bank_name: [{
						required: true,
						message: '请选择银行名称',
						trigger: ['blur', 'change']
					}],
					areaName: [{
						required: true,
						message: '请输入开户行所在城市',
						trigger: ['blur', 'change']
					}],
					card_no: [{
						required: true,
						message: '请输入银行卡号',
						trigger: ['blur', 'change']
					}],
					cert_no: [{
						required: true,
						message: '请输入证件号码',
						trigger: ['blur', 'change']
					}],
					cert_img1: [{
						required: true,
						message: '请上传证件照正面照',
						trigger: ['blur', 'change']
					}],
					cert_img2: [{
						required: true,
						message: '请上传证件照反面照',
						trigger: ['blur', 'change']
					}],
					cert_begin_date: [{
						required: true,
						message: '请输入证件有效期开始日期',
						trigger: ['blur', 'change']
					}],
					cert_end_date: [{
						validator: (rule, value, callback) => {
							if (this.form.cert_date_type == 0 && !value) {
								callback(new Error("请选择法人证件结束日期"));
							} else {
								callback();
							}
						}
					}]
				},
			};
		},
		methods: {
			...mapActions({
				upload: 'user/upload'
			}),
			certBeginDateChange(e) {
				this.form.cert_begin_date = e.year + '-' + e.month + '-' + e.day
			},
			certEndDateChange(e) {
				this.form.cert_end_date = e.year + '-' + e.month + '-' + e.day
			},
			uploadSuccess(files, name) {
				this.upload(files).then(res => {
					if (res.length > 0) {
						this.form[name] = this.$_BASE_IMG_API + res[0]
						console.log(this.form);
					}
				})
			},
			bankConfirm(data) {
				this.form.bank_name = data[0].label
				this.form.bank_code_id = data[0].value
			},
			certTypeConfirm(data) {
				console.log(data);
				this.form.cert_type_text = data[0].label
				this.form.cert_type = data[0].value
			},
			getHuifuConfig() {
				BaseCenterApi.getHuifuConfig().then(res => {
					if (res.code === 1) {
						this.bankList = res.data.bank
						this.areaList = res.data.city
						this.certTypeList = res.data.cart_type
						if(res.data.user){
							this.form = {...this.form,...res.data.user}
							this.form.cert_begin_date = res.data.user.cert_begin_date_text
							this.form.cert_end_date = res.data.user.cert_end_date_text
							this.form.areaName = res.data.user.prov_text + res.data.user.city_text
							this.form.bank_code_id = res.data.user.bank_id
							
							this.log = res.data.user
						}
					}
				})
			},
			confirmRegion(e) {
				this.form.areaName = e[0].label + e[1].label
				this.form.area_id = e[1].value
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						uni.showLoading()
						BaseCenterApi[this.type === 'edit' ? 'bankEdit':'bankAdd'](this.form).then(res => {
							uni.hideLoading()
							this.$Toast(res.msg)
							if (res.code === 1) {
								uni.navigateBack()
							}
						})
					}
				});
			},
			del() {
				uni.showModal({
					title: '提示',
					content: '确定要删除吗?',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading()
							BaseCenterApi.bankDel({
								id: this.bank_id
							}).then(res => {
								uni.hideLoading()
								if (res.code == 1) {
									uni.navigateBack()
								} else {
									this.$u.toast(res.msg)
								}
							})
						}
					}
				});
			},
			bankDetail() {
				BaseCenterApi.bankDetail({
					id: this.bank_id
				}).then(res => {
					if (res.code == 1) {
						this.form = {...this.form,...res.data}
						this.form.cert_begin_date = res.data.cert_begin_date_text
						this.form.cert_end_date = res.data.cert_end_date_text
						this.form.areaName = res.data.prov_text + res.data.city_text
						this.form.bank_code_id = res.data.bank_id
						
						this.log = res.data
					}
				})
			},
		},

		onLoad(options) {
			console.log(options);
			this.getHuifuConfig()
			this.type = options.type
			this.bank_id = options.id
			this.title = this.type == 'edit' ? '编辑银行卡' : '绑定银行卡'
			if(this.bank_id) this.bankDetail()
		}
	}
</script>

<style lang="scss">

</style>